<template>
	<view>
		<div class="user_info">
			<block v-if="!hasUserInfo">
				<van-button type="danger" class="user_btn" @tap="getUserProfile" v-if="canIUseGetUserProfile">登录
				</van-button>
			</block>
			<block v-else>
				<image @tap="bindViewTap" class="userinfo-avatar" :src="userInfo.avatarUrl" mode="cover"></image>
				<text class="userinfo-nickname">{{userInfo.nickName}}</text>
			</block>
		</div>
		<div class="user_content">
			<div class="user_main">
				<!-- 历史足迹 -->
				<div class="history_wrap">
					<navigator>
						<div class="his_num">0</div>
						<div class="his_name">收藏的店铺</div>
					</navigator>
					<navigator>
						<div class="his_num">0</div>
						<div class="his_name">收藏的商品</div>
					</navigator>
					<navigator>
						<div class="his_num">0</div>
						<div class="his_name">关注的商品</div>
					</navigator>
					<navigator>
						<div class="his_num">0</div>
						<div class="his_name">我的足迹</div>
					</navigator>
				</div>
				<!-- 我的订单 -->
				<div class="orders_wrap">
					<div class="orders_title">我的订单</div>
					<div class="order_content">
						<navigator>
							<van-icon name="todo-list" />
							<div class="order_name">全部订单</div>
						</navigator>
						<navigator>
							<van-icon name="balance-list" />
							<div class="order_name">待付款</div>
						</navigator>
						<navigator>
							<van-icon name="logistics" />
							<div class="order_name">待收货</div>
						</navigator>
						<navigator>
							<van-icon name="cash-back-record" />
							<div class="order_name">退款/退货</div>
						</navigator>
					</div>
				</div>
				<!-- 收货地址管理 -->
				<div class="address_wrap">
					收货地址管理
				</div>
				<!-- 应用信息相关 -->
				<div class="app_info_wrap">
					<div class="app_info_item app_info_contact">
						<text>联系客服</text>
						<text>400-618-4000</text>
					</div>
					<navigator class="app_info_item">意见反馈</navigator>
					<div class="app_info_item">关于我们</div>
				</div>
				<!-- 推荐 -->
				<div class="recommend_wrap">
					把应用推荐给其他人
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 登录
				userInfo: {},
				hasUserInfo: false,
				canIUseGetUserProfile: false,
			};
		},
		// 开发者文档
		onLoad() {
			if (wx.getUserProfile) {
				this.canIUseGetUserProfile = true
			}
		},
		methods: {
			getUserProfile(e) {
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						this.userInfo = res.userInfo
						this.hasUserInfo = true
						// wx.setStorageSync("login_user", res);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.user_info {
		height: 45vh;
		overflow: hidden;
		background-color: #eb4450;
		position: relative;

		.user_btn {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 40%;
			border: 1rpx solid #EEEEEE;
		}
	}

	.user_content {
		width: 100%;
		height: 850rpx;
		position: relative;
		background-color: #edece8;

		.user_main {
			width: 100%;
			height: 100%;
			padding-bottom: 100rpx;
			position: absolute;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);
			top: -40rpx;

			// 历史
			.history_wrap {
				background-color: #fff;
				display: flex;
				font-size: 30rpx;

				navigator {
					flex: 1;
					text-align: center;
					padding: 10rpx 0;

					.his_num {
						color: #DD524D;
					}
				}
			}

			// 我的订单
			.orders_wrap {
				background-color: #fff;
				margin-top: 30rpx;
				font-size: 30rpx;

				.orders_title {
					padding: 20rpx;
					border-bottom: 1rpx solid #ccc;
				}

				.order_content {
					display: flex;

					navigator {
						padding: 15rpx 0;
						flex: 1;
						text-align: center;
					}
				}
			}

			// 地址
			.address_wrap {
				margin-top: 30rpx;
				background-color: #fff;
				padding: 20rpx;
			}

			// 应用信息
			.app_info_wrap {
				margin-top: 30rpx;
				background-color: #fff;

				.app_info_item {
					padding: 20rpx;
					border-bottom: 1rpx solid #ccc;
				}

				.app_info_contact {
					display: flex;
					justify-content: space-between;
				}
			}

			// 推荐
			.recommend_wrap {
				margin-top: 30rpx;
				background-color: #fff;
				padding: 20rpx;
			}



		}

	}

	// 登录头像
	.user_info {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #aaa;
	}

	.userinfo-avatar {
		overflow: hidden;
		width: 128rpx;
		height: 128rpx;
		margin: 20rpx;
		border-radius: 50%;
	}

	.usermotto {
		margin-top: 200px;
	}
</style>
